<script setup lang="ts">
import { NButton } from 'naive-ui'
import { useCounterStore } from '~~/store/counter';
const counterStore = useCounterStore()
</script>

<template>
  <div class="box">
    <p>🍍-次数: {{ counterStore.count }}</p>
    <n-button @click="counterStore.addCounter()" type="success" circle> + </n-button>
    <n-button @click="counterStore.downCounter()" type="warning" circle> - </n-button>
    <div style="margin-top: 10px;">
      <NuxtLink to="/about">路由跳转</NuxtLink>
    </div>
  </div>
</template>

<style scoped lang="scss">
.box {
  width: 100px;
  height: 100px;
  padding: 50px;
  border: solid 6px green;
  margin: auto;
  text-align: center;
}
</style>